<template>
  <div class="home">
    <div class="cart" id="bar"></div>
    <div class="cart" id="line"></div>
    <div class="cart" id="pie"></div>
    <div class="cart" id="Nightingale"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters({ list: "cate/list" }),
  },
  mounted() {
    //获取列表数据
    this.getList().then(() => {
      this.doBar();
      this.doLine();
      this.doPie();
      this.doNightingale();
    });
  },
  methods: {
    ...mapActions({ getList: "cate/getList" }),
    //柱状图
    doBar() {
      var chartDom = document.getElementById("bar");
      var myChart = echarts.init(chartDom);
      var option = {
        xAxis: {
          type: "category",
          data: this.list.map((item) => item.catename),
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            data: this.list.map((item) =>
              item.children ? item.children.length : 0
            ),
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
    //折线图
    doLine() {
      var chartDom = document.getElementById("line");
      var myChart = echarts.init(chartDom);
      var option = {
        xAxis: {
          type: "category",
          data: this.list.map((item) => item.catename),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.list.map((item) =>
              item.children ? item.children.length : 0
            ),
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
    //饼状图
    doPie() {
      var chartDom = document.getElementById("pie");
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "分类数量",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.list.map((item) => ({
              name: item.catename,
              value: item.children ? item.children.length : 0,
            })),
          },
        ],
      };
      myChart.setOption(option);
    },
    //南丁格尔玫瑰图
    doNightingale() {
      var chartDom = document.getElementById("Nightingale");
      var myChart = echarts.init(chartDom);
      var option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [30,150 ],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: this.list.map((item) => ({
              name: item.catename,
              value: item.children ? item.children.length : 0,
            })),
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
.home {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .cart {
    margin: 10px;
    width: 48%;
    height: 350px;
  }
}
</style>